<script setup>
import { ref } from 'vue'

// 可以在这里定义详情页的数据，例如从API获取
const policyDetail = {
  title: '关于严格执行招标投标法律法规制度进一步规范招标投标主体行为的若干意见',
  date: '2023年04月13日',
  content: [
    { type: 'sectionTitle', text: '第一章 总则' },
    { type: 'paragraph', text: '第一条 为了规范招标投标活动，根据《中华人民共和国招标投标法》(以下简称招标投标法)，制定本条例。' },
    { type: 'paragraph', text: '第二条 招标投标法第三条所称工程建设项目，是指工程以及与工程建设有关的货物、服务。\n\n前款所称工程，是指建设工程，包括建筑物和构筑物的新建、改建、扩建及其相关的装修、拆除、修缮等；所称与工程建设有关的货物，是指构成工程不可分割的组成部分，且为实现工程基本功能所必需的设备、材料等；所称与工程建设有关的服务，是指为完成工程所需的勘察、设计、监理等服务。' },
    { type: 'paragraph', text: '第三条 依法必须进行招标的工程建设项目的具体范围和规模标准，由国务院发展改革部门会同国务院有关部门制订，报国务院批准后公布施行。' },
    { type: 'paragraph', text: '第四条 国务院发展改革部门指导和协调全国招标投标工作，对国家重大建设项目的工程招标投标活动实施监督检查。国务院工业和信息化、住房城乡建设、交通运输、铁道、水利、商务等部门，按照规定的职责分工，对有关招标投标活动实施监督。\n\n县级以上地方人民政府发展改革部门指导和协调本行政区域的招标投标工作。县级以上地方人民政府有关部门按照规定的职责分工，对招标投标活动实施监督，依法查处招标投标活动中的违法行为。县级以上地方人民政府对其所属部门有关招标投标活动的监督职责分工另有规定的，从其规定。\n\n财政部门依法对实行招标投标的政府采购工程建设项目的政府采购政策执行情况实施监督。\n\n监察机关依法对与招标投标活动有关的监察对象实施监察。' },
    { type: 'paragraph', text: '第五条 设区的市级以上地方人民政府可以根据实际需要，建立统一规范的招标投标交易场所，为招标投标活动提供服务。招标投标交易场所不得与行政监督部门存在隶属关系，不得以营利为目的。' }
    // ... 更多内容根据效果图填充
  ],
  attachment: '关于严格执行招标投标法律法规制度进一步规范招标投标主体行为的若干意见'
}

const processParagraph = (text) => {
  // 正则表达式匹配开头的"第X条"
  const regex = /^第[一二三四五六七八九十]条[^\s]*/; // 匹配"第"后跟中文数字和"条"，以及其后的非空白字符
  const match = text.match(regex);

  if (match) {
    const boldedPart = match[0];
    const restOfText = text.substring(boldedPart.length);
    return `<strong>${boldedPart}</strong>${restOfText.replace(/\n/g, '<br/>')}`; // 将换行符转为<br/>
  } else {
    return text.replace(/\n/g, '<br/>'); // 将换行符转为<br/>
  }
}
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>政策法规</el-breadcrumb-item>
      <el-breadcrumb-item>政策法规详情页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="main-card">
      <div class="detail-title">{{ policyDetail.title }}</div>
      <div class="detail-meta">
        <span>发布时间：</span>
        <span>{{ policyDetail.date }}</span>
      </div>
      <div class="detail-content">
        <template v-for="(item, index) in policyDetail.content" :key="index">
          <div v-if="item.type === 'sectionTitle'" class="section-title">{{ item.text }}</div>
          <div v-else v-html="processParagraph(item.text)"></div>
        </template>
      </div>
      <div class="detail-attach">
        <img src="../../images/公告列表详情页/u251.png" class="logo-img2" />
        <span class="attach-label">附件：</span>
        <img src="../../images/公告列表详情页/u252.png" class="logo-img2" />
        <span class="attach-file">{{ policyDetail.attachment }}</span>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 16px;
}
/* 根据需要从Platform2.vue复制其他通用样式 */
.el-breadcrumb {
  margin: 8px 0 8px 32px;
}
.main-card {
  border-radius: 8px;
  margin: 0 auto;
  box-shadow: 0 2px 8px #f0f1f2;
  margin-top: 8px;
  /* height: 100%; */ /* 详情页高度应由内容决定 */
  padding: 24px;
}
.detail-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 8px;
  text-align: left;
  word-break: break-word;
}
.detail-meta {
  color: #666;
  font-size: 1rem;
  margin-bottom: 18px;
  text-align: center;
  word-break: break-word;
}
.detail-content {
  color: #222;
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 18px;
  text-align: left;
  word-break: break-word;
}
.detail-content div {
  margin-bottom: 1em; /* 段落间距 */
}
.section-title {
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 4px;
  text-align: center;
  word-break: break-word;
}
.detail-attach {
  margin-top: 12px;
  color: #666;
  font-size: 1rem;
  text-align: left;
  display: flex;
  align-items: center;
}
.logo-img2 { /* Assuming logo-img2 is the style for the attachment icon */
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.attach-label {
  margin-left: 4px;
  margin-right: 4px;
}
.attach-file {
  color: #409EFF;
  cursor: pointer;
  word-break: break-word;
}
</style> 